<template>
    <div>
        <Button @click="runSql">Run</Button>
        <Input v-model="sqlStr" type="textarea" :rows="5" placeholder="Enter something..." />
        <Table height="430" stripe border size="small" :columns="tableColumns" :data="tableData"></Table>
        <Page :total="100" show-elevator show-sizer placement="top" />
    </div>
</template>

<script>
    import {createMysqlConnection, runMysqlSql} from '../../../assets/mysqlConnect'

    var connection;
    export default {
        name: "table-search",
        data () {
            return {
                tableColumns: [],
                tableData: [],
                sqlStr: ""
            }
        },
        methods: {
            initTableData () {

            },
            runSql() {
                connection = createMysqlConnection();
                connection.connect();
                var _this = this;
                var sql = _this.sqlStr;
                connection.query(sql, function (err, result) {
                    if (err) {
                        console.log(err);
                        return;
                    }
                    if(result.length > 0) {
                        _this.tableColumns = [];
                        let j = {};
                        j.type = 'selection';
                        j.width = 50;
                        j.align = 'center';
                        _this.tableColumns.push(j);
                        for (var i = 0; i < 1; i++) {
                            let keys = Object.keys(result[i]);
                            for (let key of keys) {
                                let j = {};
                                j.title = key;
                                j.key = key;
                                _this.tableColumns.push(j);
                            }
                        }
                        _this.tableData = [];
                        for (let obj of result) {
                            _this.tableData.push(obj);
                        }
                    }
                });
                connection.end();
            }
        },
        created : function() {

        }
    }
</script>

<style scoped>

</style>